<template>
	<html class="no-js" lang="en">
				<div class="row masonry containhome" >

					<!-- brick-wrapper -->
					<div class="bricks-wrapper" >

						<div class="grid-sizer"></div>

						<div class="brick entry featured-grid animate-this" >
							<div class="entry-content" >
								<div id="featured-post-slider" class="flexslider" >
									<ul class="slides" >

										<li>
											<div class="featured-post-slide" >

												<div class="post-background" style="border-radius: 10px; background-image:url('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2036019466,338878857&fm=26&gp=0.jpg');"></div>

												<div class="overlay" style="border-radius: 10px;"></div>

												<div class="post-content">
													<ul class="entry-meta">
														<li>September 06, 2016</li>
														<li><a href="#">株洲神农城</a></li>
													</ul>

													<router-link tag="a" to="/book/"><h1 class="slide-title">今日推荐</h1></router-link>
												</div>

											</div>
										</li> <!-- /slide -->

										<li>
											<div class="featured-post-slide">

												<div class="post-background" style="background-image:url('images/thumbs/featured/featured-2.jpg');"></div>

												<div class="overlay"></div>

												<div class="post-content">
													<ul class="entry-meta">
														<li>August 29, 2016</li>
														<li><a href="#">Sasuke Uchiha</a></li>
													</ul>

													<h1 class="slide-title"><a href="single-standard.html" title="">Enhancing Your Designs with Negative Space</a></h1>
												</div>

											</div>
										</li> <!-- /slide -->

										<li>
											<div class="featured-post-slide">

												<div class="post-background" style="background-image:url('@/assets/images/thumbs/featured/featured-3.jpg');;"></div>

												<div class="overlay"></div>

												<div class="post-content">
													<ul class="entry-meta">
														<li>August 27, 2016</li>
														<li><a href="#" class="author">Naruto Uzumaki</a></li>
													</ul>

													<h1 class="slide-title"><a href="single-standard.html" title="">Music Album Cover Designs for Inspiration</a></h1>
												</div>

											</div>
										</li> <!-- end slide -->

									</ul> <!-- end slides -->
								</div> <!-- end featured-post-slider -->
							</div> <!-- end entry content -->
						</div>

						<article1 v-for="item in items"
						:description='item.description' 
						:name="item.name" 
						:key='item.id'
						:id='item.id'
						:picture="item.picture"
						:flags='0'></article1>

					</div> <!-- end brick-wrapper -->

				</div> <!-- end row -->

				<div class="row">

					<nav class="pagination">
						<span class="page-numbers prev inactive">Prev</span>
						<span class="page-numbers current">1</span>
						<a href="#" class="page-numbers">2</a>
						<a href="#" class="page-numbers">3</a>
						<a href="#" class="page-numbers">4</a>
						<a href="#" class="page-numbers">5</a>
						<a href="#" class="page-numbers">6</a>
						<a href="#" class="page-numbers">7</a>
						<a href="#" class="page-numbers">8</a>
						<a href="#" class="page-numbers">9</a>
						<a href="#" class="page-numbers next">Next</a>
					</nav>

				</div>

	</html>
</template>

<script>
	import article1 from './article/article1.vue'
	export default{
		name: "Home",
		data() {
			return {
				items: [
					{
						id: 1,
						name: 'yyq',
						description: '123',
						picture: require('@/assets/images/thumbs/gallery/work1.jpg')
					},
					{
						id: 2,
						name: 'frank',
						description: '456',
						picture: require('@/assets/images/thumbs/gallery/work1.jpg')
					}
				]
			}
		},
		components:{
			article1
		}
	}
	
</script>

<style>
	.containhome {
		padding-top: 20px;
	}
</style>
